<!-- 快捷导航 -->
<template>
  <div class="personal">
    <div class="steps">
      <el-steps direction="vertical" :space="200">
        <!-- 设备 -->
        <el-step>
          <template #description>
            <div class="steps-content">
              <div class="demo-collapse">
                <el-collapse accordion>
                  <el-collapse-item>
                    <template #title>
                      <div class="personal-title">设备信息</div>
                      <el-icon class="header-icon">
                        <info-filled />
                      </el-icon>
                    </template>
                    <el-button class="btn" type="primary" @click="deviceClick"
                      >添加设备</el-button
                    >
                    <div>
                      <el-table
                        height="220"
                        v-loading="deviceLoading"
                        :data="tableData.data"
                      >
                        <el-table-column
                          align="center"
                          label="设备名称"
                          prop="deviceName"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          label="设备IP地址"
                          prop="deviceAddress"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          label="设备电量"
                          prop="deviceBattery"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          label="设备状态"
                          prop="deviceStatus"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          label="设置开始巡检隔间"
                          prop="deviceStartPan"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          label="最后更新时间"
                          prop="lastUpdateTime"
                        ></el-table-column>
                      </el-table>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </template>
        </el-step>
        <!-- 产线 -->
        <el-step>
          <template #description>
            <div class="steps-content">
              <div class="demo-collapse">
                <el-collapse accordion>
                  <el-collapse-item>
                    <template #title>
                      <div class="personal-title">产线信息</div>
                      <el-icon class="header-icon">
                        <info-filled />
                      </el-icon>
                    </template>
                    <el-button class="btn" type="primary" @click="aisleClick"
                      >添加产线</el-button
                    >
                    <div>
                      <el-table
                        :data="tableDataAisle.data"
                        v-loading="aisleLoading"
                        height="210"
                      >
                        <el-table-column
                          align="center"
                          label="产线名称"
                          prop="aisleName"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          label="产线编号"
                          prop="aisleNumber"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          label="设备名称"
                          prop="deviceName"
                        ></el-table-column>
                        <el-table-column
                          align="center"
                          label="最后更新时间"
                          prop="lastUpdateTime"
                        ></el-table-column>
                      </el-table>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </template>
        </el-step>
      </el-steps>
    </div>
  </div>
  <div>
    <deviceDrawer
      :showDrawer="showDrawer"
      @clickShow="clickShow"
      :title="devicetitle"
    />
  </div>
  <div>
    <Drawer
      :showDrawer="showDraweraisle"
      @clickShowaisle="clickShowaisle"
      :title="aisleTitle"
    />
  </div>
</template>

<script lang="" setup>
import { ref } from 'vue'
import { configuration } from '@/api/equipment'
import { aisleInfo } from '@/api/aisle'
import deviceDrawer from '@/views/equipment-set/components/Drawer'
import Drawer from './components/Drawer'
const tableData = ref([
  {
    deviceName: '设备名称',
    deviceAddress: '设备IP地址',
    deviceBattery: '设备电量',
    deviceStatus: '设备状态',
    deviceStartPan: '设置开始巡检隔间',
    lastUpdateTime: '最后更新时间',
    data: []
  }
])
const deviceLoading = ref(false)
const aisleLoading = ref(false)
// 获取设备信息
const getConfiguration = () => {
  deviceLoading.value = true
  setTimeout(() => {
    deviceLoading.value = false
    configuration().then((res) => {
      // console.log(res)
      tableData.value.data = res.data
    })
  }, 300)
}

getConfiguration()

const tableDataAisle = ref([
  {
    deviceName: '设备名称',
    aisleName: '产线名称',
    aisleNumber: '产线编号',
    lastUpdateTime: '最后更新时间',
    data: []
  }
])
// 获取产线信息
const getAisleInfo = () => {
  aisleLoading.value = true
  setTimeout(() => {
    aisleLoading.value = false
    aisleInfo().then((res) => {
      // console.log(res)
      tableDataAisle.value.data = res.data.map((item) => {
        item.loading = false
        return item
      })
    })
  }, 300)
}
getAisleInfo()
// 添加设备
const showDrawer = ref(false)
// 子组件传递来的值
const clickShow = (val, data) => {
  showDrawer.value = val
  if (data === '00000') {
    getConfiguration()
  }
}
const devicetitle = ref('添加设备')
const deviceClick = () => {
  showDrawer.value = true
}
// 添加 产线
const showDraweraisle = ref(false)
const clickShowaisle = (val, data) => {
  showDraweraisle.value = val
  console.log(data)
  if (data === '00000') {
    getAisleInfo()
  }
}
// 添加产线
const aisleTitle = '添加产线'
const aisleClick = () => {
  showDraweraisle.value = true
}
</script>
<style lang="scss">
.personal {
  margin-top: 30px;
}
.personal-title {
  margin-left: 15px;
  font-size: 18px;
}
.el-step__description {
  padding-right: 0;
  margin-top: -35px;
}
.steps-content {
  padding: 20px 0;
}
.btn {
  float: right;
  margin: 0 30px 10px 30px;
}
</style>
